<template>
  <div class="balance">
    <div class="balance-top">
      <p class="tip">账户收益</p>
      <div class="put">
        <p class="price">￥56.47</p>
        <p class="btn" @click="router({path: './inviteEarn'})">提现</p>
      </div>
    </div>      
    <tab
      class="tab"
      active-color = "#43A047"
      custom-bar-width = "2rem"
      >
      <tab-item selected @on-item-click="onItemClick(1)">收益记录</tab-item>
      <tab-item @on-item-click="onItemClick(2)">提现记录</tab-item>
    </tab>
    <div v-if="tabIndex === 1" class="put-forward">
      <div class="item">
        <div class="left">
          <p class="title"><em>王飘雪</em> 消费了178元</p>
          <p class="time">2016.12.17 10:13:34</p>
        </div>
        <div class="right active">+127.00</div>
      </div>
    </div>
    <div v-if="tabIndex === 2" class="put-forward">
      <div class="item">
        <div class="left">
          <p class="title">提现(已成功)</p>
          <p class="time">2016.12.17 10:13:34</p>
        </div>
        <div class="right active">+127.00</div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript"> 
  import { Tab, TabItem } from 'vux'
  export default {
    components: {
      Tab, 
      TabItem
    },
    data () {
      return {
        tabIndex: 1
      }
    },
    created () {

    },
    methods: {    
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.tabIndex = index
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .balance
    width 100vw
    height 100vh
    background-color #f5f7fa
    .balance-top
      padding 3rem 1.5rem
      margin-bottom 1rem
      background-color #fff
      .tip
        line-height 1.6rem
        font-size 1.5rem
        color #999999
      .put
        display flex
        margin-top 1.4rem
        .price
          font-size 3.6rem
          color #FE9700
          height 3.2rem
          line-height 3.2rem
          overflow hidden
          flex 1
          font-weight bold
          position relative
          left -.6rem
        .btn
          max-width 6rem
          height 3.2rem
          background-color #43A047
          border-radius .4rem
          flex 1
          text-align center
          line-height 3.2rem
          color #fff
          font-size 1.5rem
    .put-forward
      background-color #fff 
      .item
        display flex
        margin 0 1.5rem
        border-bottom 1px solid #e5e5e5
        &:last-child
          border none
        .left
          flex 1
          max-width 70%
          box-sizing border-box
          padding-top 2.65rem
          .title
            font-size 1.5rem
            color #333
            font-weight 500
            line-height 1.9rem
          .time
            color #999
            font-size 1.2rem
            margin-top .8rem
            line-height 1.5rem
        .right
          min-width 30%
          max-width 30%
          text-align right
          line-height 9.5rem
          color #333
          font-size 1.5rem
        .right.active
          color #FE9700
</style>